<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DBC文件解析器调试页面</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background: #f5f5f5; }
        .container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .header { text-align: center; margin-bottom: 30px; color: #333; }
        .upload-section { border: 2px dashed #ccc; padding: 20px; text-align: center; margin-bottom: 20px; border-radius: 8px; }
        .file-input { display: none; }
        .btn { background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; margin: 5px; }
        .btn:hover { background: #0056b3; }
        .btn:disabled { background: #ccc; cursor: not-allowed; }
        .results { display: none; margin-top: 20px; }
        .tab { background: #f8f9fa; border: 1px solid #ddd; padding: 10px 20px; cursor: pointer; display: inline-block; margin-right: 5px; }
        .tab.active { background: #007bff; color: white; }
        .tab-content { border: 1px solid #ddd; padding: 20px; background: #f9f9f9; display: none; }
        .tab-content.active { display: block; }
        .frame-card { background: white; border-left: 4px solid #007bff; padding: 15px; margin: 10px 0; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .signal-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        .signal-table th, .signal-table td { padding: 8px; border: 1px solid #ddd; text-align: left; }
        .signal-table th { background: #f8f9fa; }
        .error { background: #dc3545; color: white; padding: 10px; border-radius: 4px; margin: 10px 0; }
        .warning { background: #ffc107; color: #333; padding: 10px; border-radius: 4px; margin: 10px 0; }
        .info { background: #17a2b8; color: white; padding: 10px; border-radius: 4px; margin: 10px 0; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>DBC 文件解析器</h1>
            <p>基于 cpp-can-parser 算法的 JavaScript 实现</p>
        </div>
        
        <div class="upload-section">
            <h3>选择 DBC 文件</h3>
            <input type="file" id="fileInput" class="file-input" accept=".dbc" />
            <button type="button" class="btn" onclick="document.getElementById('fileInput').click()">选择文件</button>
            <button type="button" id="parseButton" class="btn" onclick="parseFile()" style="display:none;">解析文件</button>
            <div id="fileInfo" style="margin-top: 10px; color: #666;"></div>
        </div>
        
        <div id="results" class="results">
            <div class="tab active" onclick="showTab(event, 'summary')">概览</div>
            <div class="tab" onclick="showTab(event, 'frames')">帧信息</div>
            <div class="tab" onclick="showTab(event, 'raw')">原始数据</div>
            <div class="tab" onclick="showTab(event, 'warnings')">警告</div>
            
            <div id="summary" class="tab-content active">
                <div id="summaryContent"></div>
            </div>
            
            <div id="frames" class="tab-content">
                <div id="framesContent"></div>
            </div>
            
            <div id="raw" class="tab-content">
                <div id="rawContent"></div>
            </div>
            
            <div id="warnings" class="tab-content">
                <div id="warningsContent"></div>
            </div>
        </div>
    </div>

    <script src="dbc-parser.js"></script>
    <script>
        let selectedFile = null;

        document.getElementById('fileInput').addEventListener('change', function(e) {
            selectedFile = e.target.files[0];
            if (selectedFile) {
                document.getElementById('fileInfo').innerHTML = `选中文件: ${selectedFile.name} (${(selectedFile.size / 1024).toFixed(2)} KB)`;
                document.getElementById('parseButton').style.display = 'inline-block';
            }
        });

        function parseFile() {
            if (!selectedFile) {
                alert('请先选择一个文件');
                return;
            }

            const parseButton = document.getElementById('parseButton');
            parseButton.disabled = true;
            parseButton.textContent = '解析中...';

            const reader = new FileReader();
            reader.onload = function(e) {
                try {
                    const content = e.target.result;
                    const result = parseDBCContent(content, selectedFile.name);
                    displayResults(result);
                    document.getElementById('results').style.display = 'block';
                } catch (error) {
                    console.error('解析错误:', error);
                    document.getElementById('results').innerHTML = `<div class="error">解析失败: ${error.message}</div>`;
                    document.getElementById('results').style.display = 'block';
                } finally {
                    parseButton.disabled = false;
                    parseButton.textContent = '解析文件';
                }
            };
            reader.readAsText(selectedFile);
        }

        function displayResults(result) {
            // 显示概览
            document.getElementById('summaryContent').innerHTML = `
                <h3>解析结果</h3>
                <p><strong>文件名:</strong> ${result.filename}</p>
                <p><strong>版本:</strong> ${result.version || '未指定'}</p>
                <p><strong>消息帧数量:</strong> ${result.frames.length}</p>
                <p><strong>信号总数:</strong> ${result.frames.reduce((sum, frame) => sum + frame.signals.length, 0)}</p>
                <p><strong>节点数量:</strong> ${result.nodes.length}</p>
                <p><strong>警告数量:</strong> ${result.warnings.length}</p>
            `;

            // 显示帧信息
            const framesHTML = result.frames.map(frame => `
                <div class="frame-card">
                    <h4>${frame.name} (ID: 0x${frame.canId.toString(16).toUpperCase()})</h4>
                    <p><strong>DLC:</strong> ${frame.dlc} bytes ${frame.period ? `| <strong>周期:</strong> ${frame.period} ms` : ''}</p>
                    ${frame.comment ? `<p><strong>注释:</strong> ${frame.comment}</p>` : ''}
                    
                    ${frame.signals.length > 0 ? `
                        <table class="signal-table">
                            <tr><th>信号名</th><th>起始位</th><th>长度</th><th>字节序</th><th>缩放</th><th>偏移</th></tr>
                            ${frame.signals.map(signal => `
                                <tr>
                                    <td>${signal.name}</td>
                                    <td>${signal.startBit}</td>
                                    <td>${signal.length}</td>
                                    <td>${signal.endianness === 'BigEndian' ? '大端' : '小端'}</td>
                                    <td>${signal.scale}</td>
                                    <td>${signal.offset}</td>
                                </tr>
                            `).join('')}
                        </table>
                    ` : '<p>此帧没有信号定义</p>'}
                </div>
            `).join('');
            document.getElementById('framesContent').innerHTML = framesHTML;

            // 显示原始数据
            document.getElementById('rawContent').innerHTML = `<pre>${JSON.stringify(result, null, 2)}</pre>`;

            // 显示警告
            if (result.warnings.length === 0) {
                document.getElementById('warningsContent').innerHTML = '<div class="info">没有警告信息</div>';
            } else {
                const warningsHTML = result.warnings.map(warning => `
                    <div class="warning">行 ${warning.line}: ${warning.message}</div>
                `).join('');
                document.getElementById('warningsContent').innerHTML = warningsHTML;
            }
        }

        function showTab(evt, tabName) {
            document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
            document.getElementById(tabName).classList.add('active');
            evt.currentTarget.classList.add('active');
        }
    </script>
</body>
</html> 